<template>
  <div class="main">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>
    <div class="sign-up-container">
      <el-form ref="userForm" :model="params">
        <el-form-item
          class="input-prepend restyle"
          prop="nickname"
          :rules="[
            {
              required: true,
              message: '请输入你的昵称',
              trigger: 'blur',
            },
          ]"
        >
          <div>
            <el-input
              type="text"
              placeholder="你的昵称"
              v-model="params.nickname"
            />
            <i class="el-icon el-icon-user" />
          </div>
        </el-form-item>

        <el-form-item
          class="input-prepend restyle no-radius"
          prop="mail"
          :rules="[
            {
              required: true,
              message: '请输入邮箱',
              trigger: 'blur',
            },
            { validator: checkMail, trigger: 'blur' },
          ]"
        >
          <div>
            <i class="el-icon el-icon-message" />
            <el-input type="text" placeholder="邮箱" v-model="params.mail" />
          </div>
        </el-form-item>

        <el-form-item
          class="input-prepend restyle no-radius"
          prop="code"
          :rules="[
            {
              required: true,
              message: '请输入验证码',
              trigger: 'blur',
            },
          ]"
        >
          <div
            style="width: 100%; display: block; float: left; position: relative"
          >
            <el-input type="text" placeholder="验证码" v-model="params.code" />
            <i class="el-icon el-icon-edit" />
          </div>
          <div
            class="btn"
            style="position: absolute; right: 0; top: 6px; width: 40%"
          >
            <a
              href="javascript:"
              type="button"
              @click="getCodeFun()"
              :value="codeTest"
              style="border: none; background-color: none"
              >{{ codeTest }}</a
            >
          </div>
        </el-form-item>
        <el-form-item
          class="input-prepend"
          prop="password"
          :rules="[
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
          ]"
        >
          <div>
            <el-input
              type="password"
              placeholder="设置密码"
              v-model="params.password"
            />
            <i class="el-icon el-icon-lock" />
          </div>
        </el-form-item>
        <div class="btn">
          <input
            type="button"
            class="sign-up-button"
            value="注册"
            @click="submitRegister()"
          />
        </div>
        <p class="sign-up-msg">
          点击 “注册” 即表示您同意并愿意遵守简书
          <br />
          <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce"
            >用户协议</a
          >
          和
          <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a>
          。
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
import registerApi from '@/api/register'

export default {
  layout: 'sign',
  data() {
    return {
      params: {
        mail: '',
        code: '',
        nickname: '',
        password: '',
      },
      sending: false, //是否发送验证码
      second: 60, //倒计时间
      codeTest: '获取验证码',
    }
  },
  created() {},
  methods: {
    // 验证码
    timeDown() {
      this.codeTest = this.second
      let result = setInterval(() => {
        --this.codeTest
        if (this.codeTest < 1) {
          clearInterval(result)
          this.sending = true
          //this.disabled = false;
          this.second = 60
          this.codeTest = '获取验证码'
        }
      }, 1000)
    },
    // 发送验证码的方法
    getCodeFun() {
      registerApi.sendVerificationCode(this.params.mail).then((response) => {
        this.sending = false
        //调用倒计时的方法
        this.timeDown()
      })
    },
    // 点击注册按钮触发
    submitRegister() {
      registerApi.submitRegister(this.params).then((response) => {
        // 提示消息
        this.$message({
          type: 'success',
          message: '注册成功!',
        })
        //跳转登录页面
        this.$router.push({ path: '/login' })
      })
    },
    // 校验手机号
    checkPhone(rule, value, callback) {
      //debugger
      if (!/^1[34578]\d{9}$/.test(value)) {
        return callback(new Error('手机号码格式不正确'))
      }
      return callback()
    },
    // 校验邮箱
    checkMail(rule, value, callback) {
      //debugger
      if (
        !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
          value
        )
      ) {
        return callback(new Error('邮箱格式不正确'))
      }
      return callback()
    },
  },
}
</script>
<style>
.el-icon {
  vertical-align: middle;
  margin-top: 13px
}
</style>